<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>m.dot | A Pelican Blog</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i" />
  <link rel="stylesheet" href="static/m-dark.css" />
  <link rel="canonical" href="page.html" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header><nav id="navigation">
  <div class="m-container">
    <div class="m-row">
      <a href="./" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">A Pelican Blog</a>
    </div>
  </div>
</nav></header>
<main>
<article>
  <div class="m-container m-container-inflatable">
    <div class="m-row">
      <div class="m-col-l-10 m-push-l-1">
        <h1>m.dot</h1>
<!-- content -->
<p>Note: the test uses DejaVu Sans instead of Source Sans Pro in order to have
predictable rendering on the CIs.</p>
<p>Different shapes, fills etc. All default colors, filled only the first node
and the arrowheads, nothing else. Non-default font size should be preserved.</p>
<div class="m-graph">
<svg style="width: 16.312rem; height: 5.500rem;" viewBox="0.00 0.00 261.39 88.39">
<g transform="scale(1 1) rotate(0) translate(4 84.39)">
<title>Basics</title>
<g class="m-node">
<title>a</title>
<polygon points="54,-41.45 0,-41.45 0,-5.45 54,-5.45 54,-41.45"/>
<text text-anchor="middle" x="27" y="-18">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="114.45" cy="-23.45" rx="19.45" ry="19.45"/>
<ellipse cx="114.45" cy="-23.45" rx="23.45" ry="23.45"/>
<text text-anchor="middle" x="114.45" y="-18">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M54.1,-23.45C62.04,-23.45 70.89,-23.45 79.27,-23.45"/>
<polygon points="79.17,-26.95 89.17,-23.45 79.17,-19.95 79.17,-26.95"/>
</g>
<g class="m-node m-flat">
<title>c</title>
<ellipse cx="226.39" cy="-23.45" rx="27" ry="19.45"/>
<text text-anchor="middle" x="226.39" y="-18">c</text>
</g>
<g class="m-edge">
<title>b&#45;&gt;c</title>
<path d="M138.23,-23.45C152.5,-23.45 171.24,-23.45 187.69,-23.45"/>
<polygon points="187.65,-26.95 197.65,-23.45 187.65,-19.95 187.65,-26.95"/>
<text text-anchor="middle" x="168.64" y="-32.7" style="font-size: 40.0px;">0</text>
</g>
<g class="m-edge">
<title>c&#45;&gt;c</title>
<path d="M216.08,-41.55C214.16,-51.62 217.59,-60.89 226.39,-60.89 231.61,-60.89 234.95,-57.62 236.39,-52.86"/>
<polygon points="239.89,-53.16 236.66,-43.07 232.89,-52.97 239.89,-53.16"/>
<text text-anchor="middle" x="226.39" y="-65.19">1</text>
</g>
</g>
</svg>
</div>
<div class="m-graph">
<svg style="width: 5.625rem; height: 2.750rem;" viewBox="0.00 0.00 90.00 44.00">
<g transform="scale(1 1) rotate(0) translate(4 40)">
<title>More shapes</title>
<g class="m-node m-flat">
<title>d</title>
<text text-anchor="middle" x="41" y="-12.55">outsider</text>
</g>
</g>
</svg>
</div>
<p>Colors:</p>
<div class="m-graph">
<svg style="width: 5.812rem; height: 8.812rem;" viewBox="0.00 0.00 92.70 141.28">
<g transform="scale(1 1) rotate(0) translate(4 137.28)">
<title>Colors</title>
<g class="m-node m-success m-flat">
<title>a</title>
<ellipse cx="27" cy="-113.84" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-108.39">a</text>
</g>
<g class="m-node m-dim">
<title>b</title>
<ellipse cx="27" cy="-19.45" rx="19.45" ry="19.45"/>
<text text-anchor="middle" x="27" y="-14">b</text>
</g>
<g class="m-edge m-warning">
<title>a&#45;&gt;b</title>
<path d="M27,-94.14C27,-81.62 27,-64.85 27,-50.48"/>
<polygon points="30.5,-50.63 27,-40.63 23.5,-50.63 30.5,-50.63"/>
<text text-anchor="middle" x="40.88" y="-61.19">yes</text>
</g>
<g class="m-edge m-primary">
<title>b&#45;&gt;b</title>
<path d="M44.72,-27.81C54.94,-29.52 64.45,-26.73 64.45,-19.45 64.45,-15.12 61.09,-12.38 56.23,-11.23"/>
<polygon points="56.28,-7.73 46.23,-11.1 56.19,-14.73 56.28,-7.73"/>
<text text-anchor="middle" x="74.57" y="-14">no</text>
</g>
</g>
</svg>
</div>
<p>Unoriented graph without a title:</p>
<div class="m-graph m-success">
<svg style="width: 3.875rem; height: 7.625rem;" viewBox="0.00 0.00 62.00 121.78">
<g transform="scale(1 1) rotate(0) translate(4 117.78)">
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-94.34" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-88.89">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-19.45" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-14">b</text>
</g>
<g class="m-edge">
<title>a&#45;&#45;b</title>
<path d="M21.05,-74.94C19.98,-63.89 19.98,-49.88 21.05,-38.83"/>
</g>
<g class="m-edge">
<title>a&#45;&#45;b</title>
<path d="M32.95,-74.94C34.02,-63.89 34.02,-49.88 32.95,-38.83"/>
</g>
</g>
</svg>
</div>
<p>Strict graphs:</p>
<div class="m-graph">
<svg style="width: 3.875rem; height: 7.625rem;" viewBox="0.00 0.00 62.00 121.78">
<g transform="scale(1 1) rotate(0) translate(4 117.78)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-94.34" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-88.89">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-19.45" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-14">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-74.57C27,-67.25 27,-58.69 27,-50.56"/>
<polygon points="30.5,-50.67 27,-40.67 23.5,-50.67 30.5,-50.67"/>
</g>
</g>
</svg>
</div>
<div class="m-graph">
<svg style="width: 3.875rem; height: 7.625rem;" viewBox="0.00 0.00 62.00 121.78">
<g transform="scale(1 1) rotate(0) translate(4 117.78)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-94.34" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-88.89">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-19.45" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-14">b</text>
</g>
<g class="m-edge">
<title>a&#45;&#45;b</title>
<path d="M27,-74.57C27,-63.68 27,-50.03 27,-39.15"/>
</g>
</g>
</svg>
</div>
<p>Structs:</p>
<div class="m-graph">
<svg style="width: 13.000rem; height: 5.750rem;" viewBox="0.00 0.00 207.88 91.50">
<g transform="scale(1 1) rotate(0) translate(4 87.5)">
<title>Structs</title>
<g class="m-node m-info m-flat">
<title>struct</title>
<polygon points="0,-0.5 0,-83 77.25,-83 77.25,-0.5 0,-0.5"/>
<text text-anchor="middle" x="38.62" y="-63.8">a</text>
<polyline points="0,-55.5 77.25,-55.5"/>
<text text-anchor="middle" x="38.62" y="-36.3">b</text>
<polyline points="0,-28 77.25,-28"/>
<text text-anchor="middle" x="12.5" y="-8.8">c</text>
<polyline points="25,-0.5 25,-28"/>
<text text-anchor="middle" x="38.25" y="-8.8">d</text>
<polyline points="51.5,-0.5 51.5,-28"/>
<text text-anchor="middle" x="64.38" y="-8.8">e</text>
</g>
<g class="m-node m-flat">
<title>another</title>
<polygon points="95.38,-14.25 95.38,-69.25 199.88,-69.25 199.88,-14.25 95.38,-14.25"/>
<text text-anchor="middle" x="108.25" y="-36.3">a</text>
<polyline points="121.12,-14.25 121.12,-69.25"/>
<text text-anchor="middle" x="134.38" y="-50.05">b</text>
<polyline points="121.12,-41.75 147.62,-41.75"/>
<text text-anchor="middle" x="134.38" y="-22.55">c</text>
<polyline points="147.62,-14.25 147.62,-69.25"/>
<text text-anchor="middle" x="160.88" y="-36.3">d</text>
<polyline points="174.12,-14.25 174.12,-69.25"/>
<text text-anchor="middle" x="187" y="-36.3">e</text>
</g>
</g>
</svg>
</div>
<figure class="m-figure">
<svg class="m-graph m-info" style="width: 3.875rem; height: 7.625rem;" viewBox="0.00 0.00 62.00 121.78">
<g transform="scale(1 1) rotate(0) translate(4 117.78)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-94.34" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-88.89">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-19.45" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-14">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-74.57C27,-67.25 27,-58.69 27,-50.56"/>
<polygon points="30.5,-50.67 27,-40.67 23.5,-50.67 30.5,-50.67"/>
</g>
</g>
</svg>
<figcaption>This is a title.<div class="m-figure-description">
<p>This is a description.</p>
</div>
</figcaption>
</figure>
<figure class="m-figure">
<svg class="m-graph" style="width: 3.875rem; height: 7.625rem;" viewBox="0.00 0.00 62.00 121.78">
<g transform="scale(1 1) rotate(0) translate(4 117.78)">
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-94.34" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-88.89">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-19.45" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-14">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-74.57C27,-67.25 27,-58.69 27,-50.56"/>
<polygon points="30.5,-50.67 27,-40.67 23.5,-50.67 30.5,-50.67"/>
</g>
</g>
</svg>
<p>The graph below should not be styled as a part of the figure:</p>
<div class="m-graph m-danger">
<svg style="width: 3.875rem; height: 7.625rem;" viewBox="0.00 0.00 62.00 121.78">
<g transform="scale(1 1) rotate(0) translate(4 117.78)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-94.34" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-88.89">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-19.45" rx="27" ry="19.45"/>
<text text-anchor="middle" x="27" y="-14">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-74.57C27,-67.25 27,-58.69 27,-50.56"/>
<polygon points="30.5,-50.67 27,-40.67 23.5,-50.67 30.5,-50.67"/>
</g>
</g>
</svg>
</div>
</figure>
<p>Subgraphs:</p>
<div class="m-graph">
<svg style="width: 10.875rem; height: 18.250rem;" viewBox="0.00 0.00 174.00 291.67">
<g transform="scale(1 1) rotate(0) translate(4 287.67)">
<g class="m-cluster">
<title>cluster_Outer</title>
<polygon points="8,-8 8,-275.67 158,-275.67 158,-8 8,-8"/>
<text text-anchor="middle" x="83" y="-256.47">Outer</text>
</g>
<g class="m-cluster m-info">
<title>cluster_Inner</title>
<polygon points="16,-82.89 16,-240.17 86,-240.17 86,-82.89 16,-82.89"/>
<text text-anchor="middle" x="51" y="-220.97">Inner</text>
</g>
<g class="m-node m-flat">
<title>A</title>
<ellipse cx="123" cy="-185.23" rx="27" ry="19.45"/>
<text text-anchor="middle" x="123" y="-179.78">A</text>
</g>
<g class="m-node m-flat">
<title>B</title>
<ellipse cx="51" cy="-110.34" rx="27" ry="19.45"/>
<text text-anchor="middle" x="51" y="-104.89">B</text>
</g>
<g class="m-edge">
<title>A&#45;&gt;B</title>
<path d="M107.73,-168.77C97.99,-158.91 85.19,-145.95 74.21,-134.83"/>
<polygon points="76.83,-132.5 67.31,-127.85 71.85,-137.42 76.83,-132.5"/>
</g>
<g class="m-node m-flat">
<title>C</title>
<ellipse cx="123" cy="-110.34" rx="27" ry="19.45"/>
<text text-anchor="middle" x="123" y="-104.89">C</text>
</g>
<g class="m-edge">
<title>A&#45;&gt;C</title>
<path d="M123,-165.46C123,-158.14 123,-149.58 123,-141.45"/>
<polygon points="126.5,-141.56 123,-131.56 119.5,-141.56 126.5,-141.56"/>
</g>
<g class="m-node m-flat">
<title>D</title>
<ellipse cx="51" cy="-35.45" rx="27" ry="19.45"/>
<text text-anchor="middle" x="51" y="-30">D</text>
</g>
<g class="m-edge">
<title>B&#45;&gt;D</title>
<path d="M51,-90.57C51,-83.25 51,-74.69 51,-66.56"/>
<polygon points="54.5,-66.67 51,-56.67 47.5,-66.67 54.5,-66.67"/>
</g>
<g class="m-node m-flat">
<title>B2</title>
<ellipse cx="51" cy="-185.23" rx="27" ry="19.45"/>
<text text-anchor="middle" x="51" y="-179.78">B2</text>
</g>
<g class="m-edge">
<title>B2&#45;&gt;B</title>
<path d="M51,-165.46C51,-158.14 51,-149.58 51,-141.45"/>
<polygon points="54.5,-141.56 51,-131.56 47.5,-141.56 54.5,-141.56"/>
</g>
</g>
</svg>
</div>
<!-- /content -->
      </div>
    </div>
  </div>
</article>
</main>
</body>
</html>
